דמוי קליק

תגובות

פתח Ben , 29 למרץ 2013

כשאני לוחץ על submit אני שולח את הגולש לדף אחר, בדף האחר הזה יש IFRAME לאתר אחר שמספק קישור, ובלחיצה על הקישור נפתח תמונה.

השאלה שלי היא כזו, הם ניתן לפתוח לגולש את התמונה ישירות כשהוא לוחץ על submit ולחסוך את ההעברה של הדף ואת ה IFRAME ?
כיאילו שהלחיצה על הקישור בIFRAME תיהיה אוטומטית והתמונה תפתח ישר.

יש אפשרות כזו?

33 תשובות

ענה iiddaannyy ב 29 למרץ 2013 #

תשים את ה-iframe בעמוד של הטופס. כשהמשתמש שולח את הטופס, "תלחץ" עם javascript על הכפתור שנמצא ב-iframe.

ענה OrelBeY ב 29 למרץ 2013 #

כמובן. DOM. יכול להיות שאתה יכול לעשות את זה אפילו עם cURL. (לפי מה שהבנתי על זה, אם כי אני לא מבין בזה בכלל כרגע.)
יש לך כמה אפשרויות, אתה יכול לשים מיד אחרי ה-iframe אלמנט script ובתוכו ה-JS שאתה רוצה, או לעשות משהו ב-onload של ה-iframe (נקי יותר). קיצר, מה שאתה עושה - אתה ניגש לכפתור ולוחץ עליו.
איך לגשת לכפתור? אם יש לו ID או name - פשוט תחפש בגוגל "javascript get element by name". זה כזה מצחיק, כי זה בדיוק השם של הפונקציה: getElementByName. בצורה דומה יש גם את ID.
ואז, מה שאתה מקבל זה מחלקה שלו, ואתה כותב משהו כזה:

document.getElementById("blablabla").submit();

אם התכוונת למשהו אחר בשאלה שלך - תקן אותי בבקשה. :-)

נ.ב. זה בדיוק כמו ש-iiddaannyy אמר לפני שהספקתי להגיב. :-)

ענה iiddaannyy ב 29 למרץ 2013 #

שני תיקונים לתגובה מעליי:

1. הפונקציה היא getElementsByName. היא מחזירה מספר אלמנטים ולא אחד. :)
2. הכפתור בתוך ה-iframe לא שייך ל-document הנוכחי. הוא שייך ל-document של ה-iframe. ולכן צריך לעשות משהו כזה:

document.getElementById("iframe").contentWindow.document.getElementById("buttonIdInTheIframe").click();

ענה OrelBeY ב 29 למרץ 2013 #

צודק, כל כך הרבה זמן לא עבדתי עם JS שכבר שכחתי... סורי.

ענה Ben ב 29 למרץ 2013 #

עידן הקוד שלך לא עובד.. זה פשוט לא עושה כלום D:.

ענה OrelBeY ב 29 למרץ 2013 #

שינית את הדברים המתאימים? (ID)

ענה Ben ב 29 למרץ 2013 #

כן, שיחקתי עם זה עוד קצת וזה פשוט לא עובד :S

ענה OrelBeY ב 29 למרץ 2013 #

תבדוק מה הולך עם פיירבאג או עם כלי המפתחים של כרום או משהו כזה.

ענה Ben ב 30 למרץ 2013 #

זה לא כפתור, זה קישור (תגית A).
בקוד מקור של האתר ששם אני רוצה ללחוץ כל הכפתור, הכפתור כתוב בצורה הבאה:

<a id="download_link" href=""><img id="download_img" src="images/form/download.png" alt="" /></a>

איך אני יכול ללחוץ עליו? אין כלום ב href וזה לא BUTTON או משהו

ענה OrelBeY ב 30 למרץ 2013 #

המתודה click אמורה לעבוד גם עם קישורים. היא עובדת עם כל האלמנטים, למעשה. כל מה שהיא עושה זה לדמות לחיצה, ובמקרה של קישור - זה "מפעיל" את הקישור.

ענה Ben ב 30 למרץ 2013 #

אני יודע, אז למה זה לא עובד ?

<script type="text/javascript">

  document.getElementById("img").contentWindow.document.getElementById("download_link").click(); 

</script>

ענה OrelBeY ב 30 למרץ 2013 #

כמו שאמרתי, "תבדוק מה הולך עם פיירבאג או עם כלי המפתחים של כרום או משהו כזה."

ענה iiddaannyy ב 30 למרץ 2013 #

טעיתי בנוגע לפונקציה click (טוב, אני לא אשם. לא התעסקתי עם אירועים לעומק די הרבה זמן).

האמת היא שכדי באמת לדמות לחיצה אתה תצטרך לעבור את כל התהליך של create-init-dispatch של האירוע. ככה שזה נראה כך:

עריכה:
ככה לא עושים את זה, ככה עשו את זה פעם.
היום יש את ה-constructorים השונים של האירועים השונים.
תנסה את זה:

document.getElementById("img").contentWindow.document.getElementById("download_link").dispatchEvent(new MouseEvent("click"));

ענה Ben ב 30 למרץ 2013 #

גם לא עובד מוזר :S

ענה iiddaannyy ב 30 למרץ 2013 #

תדביק את כל הקוד, ככה אוכל לעזור יותר.

ענה Ben ב 30 למרץ 2013 #

זה הקוד שלי:

<iframe id="image" src="http://site.com" width="640" height="130" frameborder="0" scrolling="no"></iframe>

<input type="submit" id="submit" value="submit" class="btn" />

<script type="text/javascript">

    $("input#submit").click(function(){

        document.getElementById("image").contentWindow.document.getElementById("download_link").dispatchEvent(new MouseEvent("click"));

    });

</script>

ובאתר שבIFRAME יש תמונה של כפתור DOWNLOAD אני בעצם צריך ללחוץ על הכפתור הזה, ובקוד מקור הוא כתוב בצורה הבאה (הקוד מקור של האתר שבתוך ה IFRAME):

<a id="download_link" href=""><img id="download_img" src="images/form/download.png" alt="" /></a>

תודה עידן.

ענה iiddaannyy ב 31 למרץ 2013 #

יש בעיה עם לגשת לאלמנטים מתוך אייפריים שמוביל לדומיין אחר, נזרקת האזהרה:

Unsafe JavaScript attempt to access frame with URL http://iframeSite.co.il/ from frame with URL http://mySite.co.il/pageName.html. Domains, protocols and ports must match.

כשאגיע הביתה אבדוק את זה יותר לעומק.

ענה Ben ב 31 למרץ 2013 #

כן שמתי לב לזה מהפיירבאג של כרום.
תודה רבה עידן, אל תשכח אותי חח

ענה OrelBeY ב 31 למרץ 2013 #

יש לך שליטה עם ה-htaccess של אותו האתר (שממנו בא ה-iframe)?
אם לא, אני לא חושב שזה אפשרי, עקב המדיניות של "browser's same-origin". מה שאתה כן יכול לעשות זה לנתח את הכתובת באמצעות PHP. אתה יודע איך לעשות את זה?

ענה Ben ב 31 למרץ 2013 #

אין לי שליטה, זה לא אתר שלי מה שיש בIFRAME.
ואיך אוכל לנתח אותו באמצעות PHP?
תודה!.

ענה OrelBeY ב 31 למרץ 2013 #

file_get_contents.
בשמחה. :)

ענה Ben ב 31 למרץ 2013 #

מה אוכל לעשות עם זה ? איך אוכל ללחוץ על הכפתור שאני רוצה בעזרת זה :) ?

ענה OrelBeY ב 31 למרץ 2013 #

אה, שכחתי את הקטע הזה. XD
לפני זה, "תלחץ על הכפתור" עם CURL, ואז תקבל את התוכן. האמת היא שכאן זה נעשה קצת מסובך... אולי עדיף שתחכה לתשובות של אחרים.
בכל מקרה, נניח שעשית את זה. אחר כך אתה יכול להשתמש בספריות כמו PHP Simple HTML DOM Parser לחלץ את הקישור.

ענה Ben ב 31 למרץ 2013 #

הוא אמר שיש בעיה עם לדמות לחיצה מתוך IFRAME בJS.
איך אני יכול ללחוץ על הכפתור עם CURL ? סיבכת אותי :S
יש לך סקייפ שתוכל לעזור לי כמה דקות ?

ענה OrelBeY ב 31 למרץ 2013 #

כן, אני יודע. מצטער. עם cURL אתה יכול לשלוח לאתר POST/GET ודברים כאלה (=לחיצה על כפתור), ולקבל את התשובה (=התמונה, אחרי שאתה מפענח את התשובה, כמובן). תחפש בגוגל.

ענה iiddaannyy ב 31 למרץ 2013 #

אין בעיה עם לדמות לחיצה של אלמנט ב-iframe. הבעיה מתחילה כשה-iframe מפנה לאתר חיצוני ואז אי אפשר לגשת אליו ב-javascript.

ככה שאני די בטוח שזה לא אפשרי לביצוע בדרך שאתה מציג את זה.
אבל אם תציג בדיוק מה הקישור הזה עושה, למה אתה רוצה ללחוץ עליו ומה אתה בעצם רוצה לעשות נוכל לחשוב על פתרונות אחרים.

ענה Ben ב 31 למרץ 2013 #

אוקי אסביר בדוגמא אחרת,
יש אתר שמספק שירות הורדה מיוטיוב, אפשר להוריד את השיר ע׳י האיידי של הסרטון ביוטיוב והאתר מציג כפתור הורדה שמוריד את השיר.
באתר אחר לגמרי, אני משתמש בiframe בשביל להציג את הכפתור הורדה מהאתר הקודם שהסברתי, מה שאני רוצה לעשות זה לחסוך את הiframe ולהציג לגולש כפתור שאם הוא לוחץ עליו כביכול יהיה לחיצנה על ה iframe וההורדה תפתח.

אני מקווה שזה מובן יותר ותעזור לי למצוא פתרון, תודה רבה עידן:-).

ענה iiddaannyy ב 31 למרץ 2013 #

אתה יכול לנסות לשנות את הגודל של ה-iframe שיהיה בגודל הכפתור ויראו בתוכו רק את הכפתור.
ככה אם תעצב את ה-iframe שיראו בתוכו רק את הכפתור, שיהיה בגודל המתאים, ללא borders זה ייראה כאילו הכפתור נמצא באתר שלך ולוחצים עליו.

כאן צצה בעיה חדשה: כשהמשתמש ילחץ על הכפתור אז הוא יועבר לעמוד ההורדה רק בתוך ה-iframe.
זה לא משפיע אם הכפתור שאנחנו מדברים עליו ישר מתחיל את תהליך ההורדה. כי ההורדה פשוט תתחיל והכל יהיה בסדר.

אבל אם הכפתור הזה לא מתחיל ישר את תהליך ההורדה אלא מעביר לעמוד אחר, נצטרך לרשום מטפל לאירוע load של ה-iframe ובכך לתפוס שינויים בכתובת שאליה מפנה ה-iframe, ולדאוג לשנות את הכתובת של האתר שלנו בהתאם.

ענה Ben ב 31 למרץ 2013 #

ההורדה נפתחת בצורה אוטומטית, לא יהיה בעיה לעצב את ה-iframe בצורה של הכפתור, הבעיה היא בדפדפנים, בכרום ואקספלורר הכל תקין אך בפיירפוקס ה-iframe בהתחלה טוב ולאחר כמה שניות זה קופץ לתחתית האתר (ככה שבעצם לא יראו את כפתור ההורדה).
אז מה שחשבתי לעשות זה לעצב כפתור, ובלחיצה עליו לדמות לחיצה על הכפתור בiframe.

ובנוסף, יש אפשרות להוריד במספר פורמטים (MP3,MP4), באתר שבתוך ה iframe, וגם ההורדה נפתחת באתר בצורה אוטומטית לאחר 20 שניות, מה שעוד יותר מחזק את הדרך שלי לעצב כפתור ורק בלחיצתו ההורדה תפתח.
כיוון שאם אעשה שתי iframeים אחד שמוריד בפורמט MP3 ואחד שמוריד בפורמט MP4, בסופו של דבר יפתח לגולש 2 הורדות (אחד של הMP3 ואחד של הMP4 לאחר 20 שניות), אם אני מחליף את זה בכפתור מעוצב משלי (ככה שזה לבחירתו MP3\MP4) יפתח לו חלון בהתאם לדרישה שלו, אם הוא רוצה MP3 הוא פשוט ילחץ על הכפתור של הMP3 ולהפך.

וגם זה יותר יפה שזה מעוצב בהתאם לעצב, מאשר כפתור בצבעים ובצורה מזעזעת.

או בקיצור, אני צריך למצוא דרך שאם אני לוחץ על כפתור X מהאתר שלי, זה כיאילו לחצתי על כפתור הDOWNLOAD מהIFRAME.

ענה iiddaannyy ב 01 לאפריל 2013 #

את הבעיה של הפיירפוקס אפשר לבדוק ולתקן, זה לא בעיה.

בנוגע לבעיה של ה-20 שניות, גם את זה אפשר לתקן. ברגע שלוחצים על אחד ה-iframeים אז מוחקים את ה-iframe השני.

בנוגע לבעיה של העיצוב, גם את זה אפשר לסדר כמובן.
נשים כפתור מעוצב משלנו מתחת ל-iframe ונעשה את ה-iframe שקוף. ככה שזה רק ייראה שלוחצים על הכפתור המעוצב שלנו, אבל לוחצים על ה-iframe השקוף שמעליו.

ענה Ben ב 01 לאפריל 2013 #

1. פיירפוקס אוקי.
2. ואם הגולש לא עשה כלום במשך עשרים שניות, עדין יפתח לו שתי חלונות :S, מה שאפשר לעשות זה לבטל חלונות קופצים מתוך IFRAME, אפשרי?
3. אחלה רעיון, אעשה עכשיו, רק צריך למצוא פתרון ל 1,2.

ענה iiddaannyy ב 01 לאפריל 2013 #

2. כל 19 שניות תרענן את ה-iframe.

ענה Ben ב 02 לאפריל 2013 #

הסתדרתי עם הכל, הבעיה היחידה זה שבפיירפוקס הIFRAME יורד לתחתית האתר לאחר כמה שניות ואז כפתור ה DOWNLOAD נעלם...